<!--
 * @Author: hq_deveolper hz858632@163.com
 * @Date: 2024-10-02 17:05:33
 * @LastEditors: hq_deveolper hz858632@163.com
 * @LastEditTime: 2024-10-03 14:23:03
 * @FilePath: \city-screen\src\views\JieXiangChuiShao\components\ChuiShaoShiXiangTongJi.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="area">
        <div class="area-top">部门办哨案件统计</div>
        <div class="area-main" id="departDom"></div>
    </div>
</template>
<script>
import { streetChuiShaoDB } from '@/api/index'
export default {
    data() {
        return {

        }
    },
    mounted() {
        // this.loadEcharts({streetId:undefined,type:undefined})
    },
    methods: {
        async loadEcharts({ streetId = undefined, type = undefined }) {
            const res = await streetChuiShaoDB.getOrgOrderNum({ streetId, type })
            const noZoreData = res.data.filter((item) => {
                return item
            })
            let labelList = noZoreData.map(item => { return item.type })
            let numData = noZoreData.map(item => { return item.num })
            let LineList = noZoreData.map(item => { return item.completionRate })
            var chartDom = document.getElementById('departDom');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                "backgroundColor": 'transparent',
                "textStyle": {
                    "color": "#c0c3cd",
                    "fontSize": 14
                },
                legend: {
                    data: ['已办哨', '完成率'],
                    top: "15%"
                },
                "color": ["#63caff", "#49beff", "rgb(2,47,87)", "rgb(2,47,87)"],
                "grid": {
                    "left": '10%',
                    "right": '5%',
                    "bottom": '25%',
                    "top": '15%'
                },
                "xAxis": {
                    "axisLabel": {
                        "margin": 10,
                        "color": '#fff',
                        "rotate": 35,
                    },
                    "axisTick": {
                        "show": false
                    },
                    "splitLine": {
                        "show": false
                    },
                    "axisLine": {
                        "lineStyle": {
                            "color": "#384267",
                            "width": 1,
                            "type": "dashed"
                        },
                        "show": true
                    },
                    "data": labelList,
                    "type": "category"
                },
                "dataZoom": [{
                    "type": 'inside',
                    "show": true,
                    "start": 80,

                }],

                "yAxis": [
                    {
                        "axisLabel": {
                            "color": "#c0c3cd",
                            "fontSize": 12,
                        },
                        "axisTick": {
                            "show": false
                        },
                        "splitLine": {
                            "show": false,
                            "lineStyle": {
                                "color": "#384267",
                                "type": "dashed"
                            }
                        },
                        "axisLine": {
                            "lineStyle": {
                                "color": "#384267",
                                "width": 1,
                                "type": "dashed"
                            },
                            "show": false
                        },
                        "name": ""
                    },
                    {
                        "type": 'value',
                        "gridIndex": 0,
                        "min": 0,
                        // "max": 100,
                        "splitNumber": 2,
                        "splitLine": {
                            "show": true,
                            "lineStyle": {
                                "color": '#272456'
                            }
                        },
                        "axisLine": {
                            "show": false,
                        },
                        "axisTick": {
                            "show": false,
                        },
                        "axisLabel": {
                            "show": false,
                        },
                        "splitArea": {
                            "show": false,
                            "areaStyle": {
                                "color": ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
                            },
                        },
                    }
                ],
                "series": [
                    {
                        "type": 'line',
                        "yAxisIndex": 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        "showAllSymbol": true, //显示所有图形。
                        "symbol": 'circle', //标记的图形为实心圆
                        "symbolSize": 10, //标记的大小
                        "itemStyle": {
                            //折线拐点标志的样式
                            "color": 'rgba(215, 218, 0, 1)',
                            "borderWidth": '1.5',
                        },
                        "lineStyle": {
                            "color": 'rgba(215, 218, 0, 1)',
                        },
                        "data": LineList,
                    },
                    {
                        "data": numData,
                        "type": "bar", // 柱图
                        "barMaxWidth": "auto",
                        "barWidth": 10,
                        "itemStyle": {
                            "color": {
                                "x": 0,
                                "y": 0,
                                "x2": 0,
                                "y2": 1,
                                "type": "linear",
                                "global": false,
                                "colorStops": [{
                                    "offset": 0,
                                    "color": "#0b9eff"
                                }, {
                                    "offset": 1,
                                    "color": "#63caff"
                                }]
                            }
                        },
                        "label": {
                            "show": false,
                        }
                    }, {
                        "data": [1, 1, 1, 1, 1],
                        "type": "pictorialBar", // 底部
                        "barMaxWidth": "10",
                        "symbolOffset": [0, "50%"],
                        "symbolSize": [10, 5]
                    }, {
                        "data": numData,
                        "type": "pictorialBar",  // 顶部
                        "barMaxWidth": "10",
                        "symbolPosition": "end",
                        "symbolOffset": [0, "-50%"],
                        "symbolSize": [10, 6],
                        "zlevel": 2
                    }, {
                        "data": [200, 200, 200, 200, 200],
                        "type": "bar",
                        "barMaxWidth": "auto",
                        "barWidth": 10,
                        "barGap": "-100%",
                        "zlevel": -1 // 背景
                    }, {
                        "data": [200, 200, 200, 200, 200],
                        "type": "pictorialBar", // 背景顶部
                        "barMaxWidth": "10",
                        "symbolPosition": "end",
                        "symbolOffset": [0, "-50%"],
                        "symbolSize": [10, 6],
                        "zlevel": -1
                    }],
                "tooltip": {
                    "trigger": "axis",
                    "show": false
                }
            }

            option && myChart.setOption(option);
        }
    }
}
</script>
<style lang="less" scoped>
.area {
    width: 100%;
    padding: 0px 10px;

    .area-top {
        width: 460px;
        height: 41px;
        background: url(../../../assets/images/jiexiangchuishao/item-cillp.png) no-repeat;
        background-size: 100% 100%;
        margin-left: 50%;
        transform: translate(-50%);
        font-family: ShiShangZhongHeiJianTi;
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        padding-left: 15px;
        line-height: 41px;
    }

    .area-main {
        width: 100%;
        height: 255px;
    }
}
</style>